<template>
  <div>
    <div class="detail_header">
      <p>专辑名称:{{playlist.name}}</p>
      <p>专辑描述:{{playlist.description}}</p>
    </div>
    <div class="detail_content">
      <song
        v-for="(el,idx) in playlist.tracks"
        :key="el.id"
        :song_data="{
            song_name:el.name,
            ars:el.ar,
            album_name:el.al.name,
            idx:idx+1,
            id:el.id
          }"
        :id_list="id_list"
        :idx="idx"
      ></song>
    </div>
  </div>
</template>

<script>
import { get_playlist } from "../api/album";
import song from "../components/song";
export default {
  name: "album",
  data() {
    return {
      playlist: {},
    };
  },
  created() {
    // get_playlist(this.$route.params.id).then((res) => {
    //   console.log("专辑详情", res);
    //   this.playlist = res.data.playlist;
    // });
  },
  components: {
    song,
  },
  computed: {
    id_list() {
      console.log(this.playlist.tracks, 9999999);
      return this.playlist.tracks.map((el) => el.id);
    },
  },
  watch: {
    $route: {
      handler() {
        get_playlist(this.$route.params.id).then((res) => {
          console.log("专辑详情", res);
          this.playlist = res.data.playlist;
        });
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
</style>